<template>
  <div>
    <el-row style="margin-bottom: 15px" type="flex" align="middle">
		<el-col :span="3">
			<b style="font-size: 20px">员工管理</b>
		</el-col>
		<el-col :span="3">
			<div style="float: right">
				<el-button size="medium" @click="addChooseCondition = true;">信息筛选条件</el-button>
			</div>
		</el-col>
      <!-- 修改布局 -->
      <el-col :span="6" :offset="14">
        <el-row type="flex" align="middle">
			
          <el-col :span="20">
            <el-input
              placeholder="请输入员工姓名"
              prefix-icon="el-icon-search"
              size="medium" @keyup.enter.native="search(searchName)"
              v-model="searchName">
            </el-input>
          </el-col>
		  
          <el-col :span="15">
            <div style="float: right">
              <el-button type="success" icon="el-icon-plus" size="medium" @click="addDialogVisible = true;" round>
                添加员工
              </el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteRows()">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="medium" round
                           :disabled="this.selectionList.length===0">
                  批量删除
                </el-button>
              </el-popconfirm>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
		
    <el-table :data="workers" border tooltip-effect="dark" stripe max-height="638"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="120">
      </el-table-column>
			<el-table-column align="center" prop="id" label="工号" width="120">
			</el-table-column>
      <el-table-column align="center" label="岗位">
        <template slot-scope="scope">
          <el-tag style="margin: 5px 5px 5px 5px;"
                  v-for="job in scope.row.jobs" :disable-transitions="true"
                  :key="job" type="warning"
                  size="small">
            {{ job }}
          </el-tag>
        </template>
      </el-table-column>
			<el-table-column align="center" prop="task" label="班组">
			  <template slot-scope="scope">
			    <el-tag style="margin: 5px 5px 5px 5px;"
			            v-for="task in scope.row.tasks" :disable-transitions="true"
			            :key="task" type="warning"
			            size="small">
			      {{ task }}
			    </el-tag>
			  </template>
			</el-table-column>
			
      <el-table-column align="center" prop="money" label="目前金额/月"  width="120">
      </el-table-column>
	  
	  <el-table-column align="center" prop="score" label="当前季度绩效"  width="120">
	  </el-table-column>
			
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button plain size="mini"
                     type="primary" icon="el-icon-edit"
                     @click="clickEditButton(scope.$index)">编辑
          </el-button>
          <el-button plain size="mini"
                     type="primary" icon="el-icon-document-checked"
                     @click="totoalTaskDialogVisible = true">累计
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.$index)">
            <el-button slot="reference" plain size="mini" style="margin-left: 10px"
                       type="danger" icon="el-icon-delete">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;position:absolute;left: 0;bottom: 10px">
      <div style="display: flex;justify-content:center;">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="20">
        </el-pagination>
      </div>
    </div>
	<el-dialog title="添加筛选条件" :visible.sync="addChooseCondition" width="30%">
		<el-form :model="newWorker" :rules="rules" ref="addWorkerForm">
			<el-form-item label="输入目前金额范围">
				<el-col>
					<el-input placeholder="请输入下限" size="medium" ></el-input>
					<el-input placeholder="请输入上限" size="medium"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="输入当前季度绩效范围">
				<el-col>
					<el-input placeholder="请输入下限" size="medium" ></el-input>
					<el-input placeholder="请输入上限" size="medium"></el-input>
				</el-col>
			</el-form-item>
			
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="addChooseCondition = false">取消</el-button>
			<el-button type="primary" @click="addChooseCondition = false">确定筛选</el-button>
		</div>
	</el-dialog>
    <el-dialog title="添加员工" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newWorker" :rules="rules" ref="addWorkerForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="newWorker.name"></el-input>
        </el-form-item>
		<el-form-item label="工号" prop="id">
		  <el-input v-model="newWorker.name"></el-input>
		</el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="newWorker.jobs" multiple filterable placeholder="请选择岗位">
            <el-option
              v-for="item in allJobs"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组">
          <el-select v-model="newWorker.tasks" multiple filterable placeholder="请选择班组">
            <el-option
              v-for="item in allTasks"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addWorker('addWorkerForm')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="累计完成任务情况" :visible.sync="totoalTaskDialogVisible" width="30%">
      <el-row type="flex" align="middle" :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="text-align: center;" body-style="overflow: auto;height: 300px">
            <div slot="header">
              <el-alert title="已完成任务" type="success" show-icon :closable="false" center>
              </el-alert>
            </div>
            <el-tag v-for="number in 25" :key="number" type="warning"
                    style="margin: 5px 5px 5px 5px;" >
              任务{{ number }}
            </el-tag>
          </el-card>
        </el-col>'
        <el-col :span="12">
          <el-card shadow="hover" style="text-align: center;" body-style="overflow: auto;height: 300px">
            <div slot="header">
              <el-alert title="已逾期任务" type="error" show-icon :closable="false" center>
              </el-alert>
            </div>
            <el-tag v-for="number in 5" :key="number" type="warning"
                    style="margin: 5px 5px 5px 5px;" >
              任务{{ number }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="totoalTaskDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑员工信息" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="tempWorker" :rules="rules" ref="editWorkerForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="tempWorker.name"></el-input>
        </el-form-item>
		<el-form-item label="工号" prop="id">
		  <el-input v-model="tempWorker.id"></el-input>
		</el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="tempWorker.jobs" multiple filterable placeholder="请选择岗位">
            <el-option
              v-for="item in allJobs"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组">
          <el-select v-model="tempWorker.tasks" multiple filterable placeholder="请选择班组">
            <el-option
              v-for="item in allTasks"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editWorker('editWorkerForm')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    deleteRow(index) {
      this.workers.splice(index, 1);
      this.$message({
        showClose: true,
        message: '删除成功！',
        type: 'success'
      });
    },
    deleteRows(index) {
      this.workers = this.workers.filter(
        worker => {
          return !this.selectionList.includes(worker);
        }
      );
      this.$message({
        showClose: true,
        message: '删除成功！',
        type: 'success'
      });
    },
    clickEditButton(index) {
      this.editDialogVisible = true;
      this.currentIndex = index;
      //中间变量，以便点击提交的时候才会更新当前的数据
      this.tempWorker = JSON.parse(JSON.stringify(this.workers[index]));
    },
    search(keyword){
      // this.workers = this.workers.filter(
      //   worker => {
      //     return worker.name.includes(keyword);
      //   }
      // );
    },
    addWorker(formName){
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '添加成功！',
              type: 'success'
            });
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.workers.push(this.newWorker)
            this.addDialogVisible = false
            this.newWorker = {
              name: '',
			  id:'',
              tasks: [],
              jobs: []
            }
          } else {
            return false;
          }
        });
    },
    editWorker(formName) {
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success'
            });
            this.editDialogVisible = false;
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.workers.splice(this.currentIndex, 1, this.tempWorker)
          } else {
            return false;
          }
        });
    },
    //批量选择时触发
    handleSelectionChange(selection) {
      this.selectionList = []
      selection.forEach((item, index) => {
        this.selectionList.push(item)
      });
    },
  },
  data() {
    return {
      selectionList: [],
      tempWorker: {
        name: '',
		id: '',
        tasks: [],
        jobs: []
      },
      editDialogVisible: false,
      addDialogVisible: false,
	  addChooseCondition: false,
      totoalTaskDialogVisible: false,
      currentIndex: 0,
      allJobs: ['岗位1', '岗位2', '岗位3', '岗位4', '岗位5', '岗位6'],
      allTasks: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7', '任务8', '任务9', '任务10', '任务11', '任务12', '任务13', '任务14', '任务15', '任务16'],
      searchName: '',
      newWorker: {
        name: '',
        tasks: [],
        jobs: []
      },
      rules: {
        name: [
          {required: true, message: '请输入工人姓名', trigger: 'blur'},
        ]
      },
      workers: [
        {
          name: '工人2',
					id: '1002',
          tasks: ['班组7'],
          jobs: ['岗位1'],
		  money: '500',
		  score: '100'
        },
        {
          name: '工人3',
					id: '1003',
          tasks: ['班组5'],
          jobs: ['岗位2'],
		  money: '400',
		  score: '100'
        },
        {
          name: '工人1',
					id: '1001',
          tasks: ['班组1'],
          jobs: ['岗位3'],
		  money: '600',
		  score: '50'
        },
        {
          name: '工人4',
					id: '1004',
          tasks: ['班组4'],
          jobs: ['岗位5'],
		  money: '300',
		  score: '100'
        },
        {
          name: '工人6',
					id: '1006',
          tasks: ['班组1'],
          jobs: ['岗位4'],
		  money: '500',
		  score: '300'
        },
        {
          name: '工人5',
					id: '1005',
          tasks: ['班组5'],
          jobs: ['岗位7'],
		  money: '400',
		  score: '100'
        },
        {
          name: '工人7',
					id: '1007',
          tasks: ['班组3'],
          jobs: ['岗位3'],
		  money: '500',
		  score: '300'
        },
        {
          name: '工人8',
					id: '1008',
          tasks: ['班组5'],
          jobs: ['岗位1'],
		  money: '600',
		  score: '200'
        },
        {
          name: '工人9',
					id: '1009',
          tasks: ['班组1'],
          jobs: ['岗位4'],
		  money: '300',
		  score: '50'
        },
        {
          name: '工人10',
		  id: '1010',
          tasks: ['班组5'],
          jobs: ['岗位2'],
		  money: '500',
		  score: '200'
        }
      ],
    }
  },
}
</script>

<style scoped>
.el-card >>> .el-card__header{
  padding: 0;
}
</style>
